<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h2>WOVEN</h2>
      </el-header>
      <el-main>
        <div class="home">
          <el-form :model="form" label-width="14%">
            <el-form-item label="op1">
              <el-select v-model="form.op1" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="烧边机" value="1" />
                <el-option label="钩针机" value="2" />
                <el-option label="木梳机" value="3" />
              </el-select>
            </el-form-item>

            <el-form-item label="op2">
              <el-select v-model="form.op2" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="1" value="1" />
                <el-option label="2" value="2" />
                <el-option label="3" value="3" />
              </el-select>
            </el-form-item>

            <el-form-item label="op3">
              <el-select v-model="form.op3" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
              </el-select>
            </el-form-item>

            <el-form-item label="op4">
              <el-select v-model="form.op4" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
              </el-select>
            </el-form-item>

            <el-form-item label="op5">
              <el-select v-model="form.op5" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
              </el-select>
            </el-form-item>

            <el-form-item label="op6">
              <el-select v-model="form.op6" placeholder="选一个吧老铁">
                <el-option label="NA" value="" />
                <el-option label="4" value="4" />
                <el-option label="5" value="5" />
                <el-option label="6" value="6" />
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">Create</el-button>
              <el-button>Cancel</el-button>
            </el-form-item>
          </el-form>

         
          <div class="thumbs">
            <span v-for="(item, index) in data.data.slice((data.page - 1) * data.limit, data.page * data.limit)"
              :key="index">
              <a :href="ip + item.thumbs" data-fancybox="gallery" :data-caption="item.tta">
                <img width="100" :src="ip + item.thumbs" />
              </a>
            </span>

            <!-- 分页器 -->
            <el-pagination :current-page="data.page" :page-size="data.limit" :page-sizes="[6, 9, 12, 15, 18]" background
              layout="total, sizes, prev, next" :total="data.total" @size-change="handleSizeChange"
              hide-on-single-page:true @current-change="handleCurrentChange" />
            <!-- layout="total, sizes, prev, pager, next, jumper -->
          </div>
        


        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { woven } from "../http/api.js";
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox.css";

let form = reactive({
  op1: "",
  op2: "",
  op3: "",
  op4: "",
  op5: "",
  op6: "",
});
const ip = ref("http://search2.cctsk2109.cn/");
const data = reactive({
  data: [],
  page: 1,
  limit: 6,
  total: 0,      // 总条数
});


const onSubmit = () => {
  woven(form).then((res) => {
    ElMessage.success("数据接收成功咯QAQ~");
    // console.log(res);
    data.data = res.data;
    data.total = res.data.length;
    console.log(data.total);

  });
};

Fancybox.bind('[data-fancybox="gallery"]', {
  caption: function (fancybox, carousel, slide) {
    return (
      `${slide.caption} <br />`
    );
  },
});
const handleSizeChange = (val) => {
  data.limit = val
  data.page = 1
};


const handleCurrentChange = (val) => {
  data.page = val

}



</script>

<style scoped>
.thumbs {
  border: 1px solid black;
  padding: 5px;
}

.el-select {
  width: 100%;
}

.home {
  height: 100vh;
}

.flex-grow {
  flex-grow: 1;
}

.el-pagination {
  margin-top: 1em;
}
</style>
